<template>
  <!-- 		个人中心	 -->
  <view>
    <!-- 头像 -->
    <view class="top border-bottom">
      <view class="pd flex flex-s top-c">
        <image
          :src="userinfo.userpic"
          mode=""
          style="width: 180rpx; height: 180rpx; border-radius: 100%"
        ></image>
        <view class="top-right flex flex-c">
          <view class="flex flex-s w100" style="justify-content: space-around">
            <view class="t-c">
              <view class="font-md font-weight">{{ user.post_count }}</view>
              <view class="font">帖子</view>
            </view>
            <view class="t-c">
              <view class="font-md font-weight">{{
                user.withfollow_count
              }}</view>
              <view class="font">关注</view>
            </view>
            <view class="t-c">
              <view class="font-md font-weight">{{ user.withfen_count }}</view>
              <view class="font">粉丝</view>
            </view>
          </view>
          <button
            class="mainBg"
            style="
              width: 100%;
              color: #fff;
              height: 60rpx;
              line-height: 60rpx;
              margin-top: 15rpx;
            "
            v-if="$store.state.userInfo.userinfo.user_id == userId"
            @click="gotoSet"
          >
            <!-- {{ userinfo.isFollow ? "取消关注" : "关注" }} -->
            编辑资料
          </button>
          <button
            v-else
            class="mainBg"
            style="
              width: 100%;
              color: #fff;
              height: 60rpx;
              line-height: 60rpx;
              margin-top: 15rpx;
            "
            @click="Follow"
          >
            {{ userinfo.isFollow ? "取消关注" : "关注" }}
          </button>
        </view>
      </view>
    </view>

    <!-- 切换 -->
    <view class="tab flex pd flex-a" style="margin-top: 27rpx">
      <view
        class="font"
        v-for="(item, index) in tabs"
        :key="index"
        :class="index === tag ? 'font-md mainColor font-weight' : ''"
        @click="tag = index"
        >{{ item }}</view
      >
    </view>

    <template v-if="tag === 0">
      <view class="border-bottom pb">
        <view class="pd pt">
          <view class="font-lg mt">账号信息</view>
          <view class="font-md mt"
            >账号年龄：{{ userinfo.regtime | time }}</view
          >
          <view class="font-md mt">账号id：{{ userId }}</view>
        </view>
      </view>
      <view class="border-bottom pb">
        <view class="pd pt">
          <view class="font-lg mt">个人信息</view>
          <view class="font-md mt">职业：{{ userinfo.job }}</view>
          <view class="font-md mt">故乡：{{ userinfo.path }}</view>
          <view class="font-md mt">情感：{{ userinfo.qg }} </view>
        </view>
      </view>
    </template>
    <template v-if="tag === 1">
      <view>
        <block v-for="(item, index) in newList" :key="index">
          <userListVue
            @doSupport="doSupport"
            :item="item"
            :index="index"
            :follow="false"
          ></userListVue>

          <view class="divBg"> </view>
        </block>
      </view>
    </template>

    <uni-popup ref="popup" background-color="#fff">
      <view
        class="t-c border-bottom"
        style="height: 100rpx; line-height: 100rpx"
      >
        <text class="iconfont icon-sousuo mr"></text>
        加入黑名单
      </view>
      <view class="t-c" style="height: 100rpx; line-height: 100rpx">
        <text class="iconfont icon-qingchu mr"></text>
        聊天
      </view>
    </uni-popup>
  </view>
</template>

<script>
const emotionArray = ["保密", "未婚", "已婚"];
import userListVue from "@/components/common/user-list.vue";
import { getuserinfo, getcounts, userList, follow, unfollow } from "@/api/api";
import $T from "@/common/time.js";
export default {
  components: {
    userListVue,
  },
  data() {
    return {
      tag: 0,
      tabs: ["主页", "帖子"],
      newList: [], //关注列表 假数据
      loadingbuttom: "加载中",
      userId: 0,

      userinfo: {
        userpic: "/static/default.jpg",
        username: "",
        sex: 0,
        age: 20,
        isFollow: false,
        regtime: "",
        birthday: "",
        job: "",
        path: "",
        qg: "",
      },
      user: {
        post_count: 0, //帖子
        withfollow_count: 0, //关注
        withfen_count: 0, //粉丝
      },
      page: 1,
    };
  },
  onNavigationBarButtonTap(e) {
    console.log(e);
    // console.log("xx")
    this.$refs.popup.open("top");
  },
  onUnload() {
    // console.log("返回");
    uni.$emit("getDate");
  },
  mounted() {
    this.getDate();
  },
  onReachBottom() {
    this.loading();
  },
  watch: {
    isme() {
      return this.$store.state.userInfo.userinfo.user_id === this.userId
        ? true
        : false;
    },
  },
  filters: {
    time(value) {
      return $T.gettime(value);
    },
  },
  onLoad(e) {
    // console.log(e.userId);
    this.userId = e.userId;
    // 请求数据
    this.getInfo();
    this.getcount();

    uni.$on("updateFollowOrSupport", (e) => {
      switch (e.type) {
        case "follow": // 关注
          this.follow(e.user_id);
          break;
        case "support": // 顶踩
          this.doSupport(e.data);
          break;
      }
    });
  },
  methods: {
    // 去设置页面
    gotoSet() {
      uni.navigateTo({
        url: "../user-infoEdit/user-infoEdit",
      });
    },
    //   获取个人数据
    async getInfo() {
      let res = await getuserinfo({
        user_id: this.userId,
      });
      console.log(res);
      if (res.id) {
        this.userinfo = {
          userpic: res.userpic || "../../static/common/nothing.png",
          username: res.username,
          sex: res.userinfo.sex,
          age: res.userinfo.age,
          isFollow: res.fens.length > 0,
          isblack: res.blacklist.length > 0,
          regtime: res.create_time,
          birthday: res.userinfo.birthday,
          job: res.userinfo.job ? res.userinfo.job : "无",
          path: res.userinfo.path ? res.userinfo.path : "无",
          qg: emotionArray[res.userinfo.qg],
        };
      }
    },
    // 获取用户相关信息
    getcount() {
      getcounts(this.userId).then((res) => {
        this.user.post_count = res.post_count; //帖子
        this.user.withfollow_count = res.withfollow_count; //关注
        this.user.withfen_count = res.withfen_count; //粉丝
      });
    },
    // 获取文章数据
    async getDate() {
      let res = await userList(this.userId, this.page);

      console.log(res);
      if (res.list.length < 10) {
        this.loadingbuttom = "加载完成";
      } else {
        this.loadingbuttom = "加载中";
      }
      let list = res.list.map((item) => {
        return {
          userpic: item.user.userpic,
          id: item.id,
          user_id: item.user_id,
          title: item.title,
          username: item.user.username,
          newstime: item.create_time,
          isFollow: item.user.fens.length,
          support: {
            type:
              item.support.length > 0
                ? item.support[0].type === 0
                  ? "support"
                  : "unsupport"
                : "",
            support_count: item.ding_count,
            unsupport_count: item.cai_count,
          },
          comment_count: item.comment_count,
          share_num: item.sharenum,
          titlepic: item.titlepic,
        };
      });
      this.newList = this.page === 1 ? list : [...this.newList, ...list];
    },
    // 上拉加载
    loading(index) {
      // this.loadingbuttom = "加载中";
      this.page++;
      this.getDate();
    },
    // 关注功能

    async Follow() {
      let res;
      // 取消 unfollow
      if (this.userinfo.isFollow) {
        res = await unfollow({ follow_id: this.userId });
      } else {
        res = await follow({ follow_id: this.userId });
      }
      if (res.data) {
        if (res.data.errorCode === 20008) {
          uni.showToast({
            title: "请先绑定手机号",
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateTo({
              url: "../user-phone/user-phone",
            });
          }, 500);
        }
      }
      if (res.statusCode == 400) {
        uni.showToast({
          title: "操作失败",
          icon: "none",
        });
      } else {
        uni.showToast({
          title: this.userinfo.isFollow ? "取消关注成功" : "关注成功",
          icon: "none",
        });
      }
      console.log("关注---", res);
      this.getInfo();
    },
    // 点赞 踩功能
    // 点赞
    doSupport(type) {
      console.log(type);
      this.newList.forEach((item) => {
        // console.log(item);
        if (item.id === type.id) {
          // 之前没有操作过
          if (item.support.type === "") {
            item.support[type.type + "_count"]++;
          } else if (
            item.support.type === "support" &&
            type.type === "unsupport"
          ) {
            console.log("顶", item.support.support_count);
            // 顶 - 1
            item.support.support_count--;
            // 踩 + 1
            item.support.unsupport_count++;
          } else if (
            item.support.type === "unsupport" &&
            type.type === "support"
          ) {
            // 之前踩了
            // 顶 + 1
            console.log("不执行", item.support.support_count);
            if (item.support.support_count === -1) {
              item.support.support_count = 0;
            }
            item.support.support_count++;
            // 踩 - 1
            item.support.unsupport_count--;
          }
          item.support.type = type.type;
        }
      });
    },
  },
};
</script>

<style scope lang="less">
.top-right {
  width: 60%;
  flex-direction: column;
}
.top-c {
  padding-top: 50rpx;
  padding-bottom: 50rpx;
}
</style>
